<template>
  <s-table
    ref="table"
    size="default"
    :rowKey="(record, index) => index"
    :columns="columns"
    :data="loadData"
    :scroll="{ x: true }"
    :pagination="{ showTotal: (total) => `共 ${total} 条` }"
  >
    <div slot="tabAction"></div>
    <span slot="index" slot-scope="text, record, index">{{ index + 1 }} </span>
    <Ellipsis :length="18" tooltip slot="changeReason" slot-scope="text" class="text-warning">
      {{ text }}
    </Ellipsis>
    <span slot="CityRfyDate" slot-scope="text">{{ text | moment }}</span>
    <div slot="action" slot-scope="text, record">
      <y-button type="link" @click="handleDetail(record.ID)">查看</y-button>
    </div>
  </s-table>
</template>

<script>
/**
 *Parser
 *@Author
 *@Version
 *@property
 *@event
 */
import { STable, Ellipsis } from '@/components'
import { getIndexProposerList } from '@/api/dashboard'

export default {
  components: {
    STable,
    Ellipsis
  },
  props: {},
  computed: {
    textColor () {
      return function (text) {
        if (text === '') {
          text = '未审核'
        }
        const classMap = new Map([
          ['未审核', 'text-warning'],
          ['未审批', 'text-warning'],
          ['未上报', 'text-warning'],
          ['已上报', 'text-success'],
          ['不符合', 'text-error'],
          ['符合', 'text-success'],
          ['已接收', 'text-primary'],
          ['已退回', 'text-error']
        ])
        return classMap.get(text)
      }
    }
  },
  data () {
    return {
      queryParam: {
        UserID: this.$store.getters.userid
      },
      columns: [
        {
          title: '序号',
          align: 'center',
          width: '80px',
          scopedSlots: { customRender: 'index' }
        },
        {
          title: '申请编号',
          align: 'center',
          dataIndex: 'ApplyNo'
        },
        {
          title: '申请人',
          align: 'center',
          dataIndex: 'Proposer'
        },
        {
          title: '身份证号',
          align: 'center',
          dataIndex: 'IDCard'
        },
        {
          title: '保障类型',
          align: 'center',
          dataIndex: 'ApplyClass'
        },
        {
          title: '补贴方式',
          align: 'center',
          dataIndex: 'CityVfyAssign'
        },
        {
          title: '区/县',
          align: 'center',
          dataIndex: 'RegionName'
        },
        {
          title: '社区/乡镇',
          align: 'center',
          dataIndex: 'TownshipName'
        },
        {
          title: '核定保障人数',
          align: 'center',
          dataIndex: 'CityVfyNumber'
        },
        {
          title: '保障金额',
          align: 'center',
          dataIndex: 'SMoney',
          customRender: (text) => {
            return <span>{text || '无'}</span>
          }
        },
        {
          title: '安置地点',
          align: 'center',
          dataIndex: 'EsitesSelect',
          customRender: (text) => {
            return <span>{text || '无'}</span>
          }
        },
        {
          title: '社区审核状态',
          align: 'center',
          dataIndex: 'BeviewResult',
          customRender: (text) => {
            return <span class={this.textColor(text)}>{text || '未审核'}</span>
          }
        },
        {
          title: '区级审核结果',
          align: 'center',
          dataIndex: 'VerifyResult',
          customRender: (text) => {
            return <span class={this.textColor(text)}>{text || '未审核'}</span>
          }
        },
        {
          title: '上报状态',
          align: 'center',
          dataIndex: 'SubmitToCity',
          customRender: (state) => {
            const getText = () => {
              if (!state) return '未上报'
              const textMap = new Map([
                ['0', '未上报'],
                ['1', '已上报'],
                ['2', '已接收'],
                ['-1', '已退回']
              ])
              return textMap.get(state)
            }
            return <span class={this.textColor(getText())}>{getText()}</span>
          }
        },
        {
          title: '市审核状态',
          align: 'center',
          dataIndex: 'CityVfyResult',
          customRender: (text) => {
            return <span class={this.textColor(text)}>{text || '未审核'}</span>
          }
        },
        {
          title: '市(级)审批',
          align: 'center',
          dataIndex: 'CityRfyResult',
          customRender: (text) => {
            return <span class={this.textColor(text)}>{text || '未审批'}</span>
          }
        },
        {
          title: '审批时间',
          align: 'center',
          dataIndex: 'CityRfyDate',
          scopedSlots: { customRender: 'CityRfyDate' }
        },
        {
          title: '操作',
          align: 'center',
          width: '80px',
          fixed: 'right',
          scopedSlots: { customRender: 'action' }
        }
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        const requestParameters = Object.assign({}, parameter, this.queryParam)
        return getIndexProposerList(requestParameters).then((res) => res)
      }
    }
  },
  methods: {

    handleDetail (id) {
      this.$router.push({
        name: 'assureInformationView',
        params: {
          id
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
/deep/ .ant-table td {
  white-space: nowrap;
}
</style>
